<script lang="ts" setup>
// import { useRoute, useRouter } from "vue-router"
import { reactive, ref } from "vue"

const num = ref(0)
const radio1 = ref("")
const radio3 = ref("")
const ruleForm = reactive({
  name: "",
  sum: 20
})
const rules = reactive({
  req: [{ required: true, message: "请输入", trigger: "blur" }]
})
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <!-- <h2>领料单</h2> -->
      <el-form v-show="!num"
        :model="ruleForm"
        :rules="rules"
        inline
        label-width="auto"
        status-icon
        style="max-width: 920px"
        class="m-auto pt-8"
      >
      <el-form-item label="属性" prop="req" class="flex-1">
          <el-radio-group v-model="radio3">
            <el-radio-button label="工具/设备/工装" value="工具/设备/工装" />
            <el-radio-button label="物料/半成品转运" value="物料/半成品转运" />
            <!-- <el-radio-button label="设备" value="3" />
            <el-radio-button label="工装" value="4" /> -->
            <!-- <el-radio-button label="物料半成品" value="5" /> -->
          </el-radio-group>
        </el-form-item>
        <br>
        <el-form-item label="配送方式" prop="req">
          <div style="width: 178px">
            <el-radio-group v-model="radio1">
              <el-radio-button label="物流班车" value="1" />
              <el-radio-button label="物流专车" value="2" />
            </el-radio-group>
          </div>
        </el-form-item>
        <div v-show="!num" class="ml-100 py-5">
          <el-button type="primary" @click="num = 1">下一步</el-button>
        </div>
      </el-form>
      <el-form
      v-if="num"
        :model="ruleForm"
        :rules="rules"
        inline
        label-width="auto"
        status-icon
        style="max-width: 920px"
        class="m-auto pt-8"
      >
        <el-form-item label="申请部门" prop="name">
          <div style="width: 178px">金工部</div>
        </el-form-item>
        <el-form-item label="车间" prop="region">
          <div style="width: 178px">1车间</div>
        </el-form-item>
        <el-form-item label="班组" prop="region">
          <div style="width: 178px">2班组</div>
        </el-form-item>
        <br />
        <el-form-item label="申请人" prop="region">
          <div style="width: 178px">张三</div>
        </el-form-item>
        <el-form-item label="电话" prop="region">
          <div style="width: 178px">13688889999</div>
        </el-form-item>

        <br />
        <el-form-item label="发货地址" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="收货地址" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="收货人" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="收货人部门" prop="req">
          <div style="width: 178px">自动带入</div>
        </el-form-item>
        <el-form-item label="收货人电话" prop="req">
          <div style="width: 178px">自动带入</div>
        </el-form-item>
        <el-divider />
        <div class="pb-3 flex items-center">
          <div class="flex-1"></div>
          <div>
            <el-button icon="CirclePlus" type="primary">加工号</el-button>
            <el-button icon="CirclePlus" type="primary">加产品</el-button>
          </div>
        </div>

        <div v-if="radio3 === '工具/设备/工装'">
          <el-form-item label="物料名称" prop="req">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="规格">
            <el-input style="width: 50px;" placeholder="长" />
            <el-input style="width: 50px;" placeholder="宽" />
            <el-input style="width: 50px;" placeholder="高" />
          </el-form-item>
          <el-form-item label="重量(T)">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="型号">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
          </el-form-item>
          <!-- <el-form-item label="材质">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
          </el-form-item> -->
          <el-form-item label="数量(件)" prop="req">
            <div style="width: 178px">
              <el-input-number v-model="ruleForm.sum" placeholder="请输入" />
            </div>
          </el-form-item>
          <el-form-item label="数量(铲)" prop="req">
            <div style="width: 178px">
              <el-input-number v-model="ruleForm.sum" placeholder="请输入" />
            </div>
          </el-form-item>
          <el-form-item label="备注" prop="reqe">
            <el-input
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              v-model="ruleForm.name"
              style="width: 470px"
              placeholder="请输入"
            />
          </el-form-item>
          <el-divider />
        </div>
        <div v-else>
          <el-form-item label="产品工号">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="产品名称" prop="req">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="机号" prop="req">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
          </el-form-item>
          <br />
          <el-form-item label="物料名称" prop="req">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="图号">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="件号" prop="req">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
          </el-form-item>
          <br />
          <el-form-item label="数量(件)" prop="req">
            <div style="width: 178px">
              <el-input-number v-model="ruleForm.sum" placeholder="请输入" />
            </div>
          </el-form-item>
          <el-form-item label="数量(铲)" prop="req">
            <div style="width: 178px">
              <el-input-number v-model="ruleForm.sum" placeholder="请输入" />
            </div>
          </el-form-item>
          <el-form-item label="备注" prop="reqe">
            <el-input
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              v-model="ruleForm.name"
              style="width: 470px"
              placeholder="请输入"
            />
          </el-form-item>
          <el-divider />
        </div>

        <!-- <el-form-item label="方向" prop="req">
          <div style="width: 178px">
            <el-radio-group v-model="radio2">
              <el-radio-button label="东向" value="1" />
              <el-radio-button label="西向" value="2" />
            </el-radio-group>
          </div>
        </el-form-item>
        <br> -->

        <el-form-item label="质检人">
          <el-input v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        <br />
        <!-- <el-divider /> -->

        <el-form-item label="上传照片" prop="req">
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            style="width: 178px"
          >
            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <br>
        <el-form-item label="配送费用预估">
          <span class="mr-2">500元 </span>
          <el-tooltip effect="dark" content="根据吨位、距离、体积计算" placement="top">
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </el-form-item>
        <div class="text-right py-5">
          <el-button @click="num = 0">上一步</el-button>
          <el-button>存为草稿</el-button>
          <el-button type="primary">下单</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<style>
.el-divider--horizontal {
  margin: 0 0 18px 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
